<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="lib/leaflet.css">
    <link rel="stylesheet" type="text/css" href="css/map.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="css/login.css">
</head>

<body>
<div id="target"
     style="position: absolute;z-index: 1000;width: 80px;height: 40px;background-color: red;left: 20px;top:400px;"></div>
<div class="loginPage">
    <div class="logoArea">
        <img class="logo" src="../images/logo.png" alt="中移在线">
        <span>新疆维吾尔自治区精准扶贫信息管理平台</span>
        <div class="logoArea-user">
            <img src="images/icon_user_pic.png"/>
            <b>用户名</b>
            <i></i>
        </div>
        <!--logoArea-user-->
    </div>
    <div class="login">
        <div class="login_l">
            <div class="map" id="map">
                <!--<img src="images/map.png" alt="临时地图">-->
            </div>
        </div>
        <div class="login_r">
            <div class="loginArea">
                <h1>用户登录</h1>
                <div class="name">
                    <p>工号</p>
                    <div class="inputBox">
                        <i class="icon_name"></i>
                        <input type="text" name="" placeholder="请输入用户名">
                    </div>
                </div>
                <div class="password">
                    <p>密码</p>
                    <div class="inputBox">
                        <i class="icon_code"></i>
                        <input type="password" name="" placeholder="请输入密码">
                    </div>
                </div>
                <div class="imgCode">
                    <p>图形验证码</p>
                    <div class="inputBox">
                        <i class="icon_numbercode"></i>
                        <input type="text" name="" placeholder="请输入图形验证码">
                    </div>
                    <img id="J_vimg" title="看不清换一个" onclick="changeCode();" src="">
                </div>
                <div class="numbercode">
                    <p>验证码</p>
                    <div class="inputBox">
                        <i class="icon_numbercode"></i>
                        <input type="text" name="" placeholder="请输入验证码">
                    </div>
                    <a class="getCode" href="javascript:;">获取验证码</a>
                </div>
                <div class="btnBox">
                    <a class="button" href="javascript:;">登录</a>
                </div>
            </div>
        </div>
        <!--login_r-->
        <div class="login-menu">
            <ul>
                <li>
                    <a href="###">
                        <p>基础信息</p>
                    </a>
                </li>
                <li>
                    <a href="###">
                        <p>项目资金</p>
                    </a>
                </li>
                <li>
                    <a href="###">
                        <p>行业信息</p>
                    </a>
                </li>
                <li>
                    <a href="###">
                        <p>大屏分析</p>
                    </a>
                </li>
                <li>
                    <a href="###">
                        <p>GIS地图</p>
                    </a>
                </li>
                <li>
                    <a href="###">
                        <p>帮扶工作</p>
                    </a>
                </li>
            </ul>
        </div>
        <!--login-menu-->
    </div>
    <div class="foot">
        <p class="copyright">Copyright &#169 1999-2018 中国移动 版权所有</p>
    </div>
</div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="lib/leaflet.js"></script>
<script type="text/javascript">
    var map = L.map("map", {
        center: [41.111962, 85.203633],
        zoom: 4,
        attributionControl: false,//隐藏logo
        zoomControl: false,//隐藏缩放按钮
        dragging: false,//禁止平移
        zoomDelta: 0,
        zoomSnap: 0,
        boxZoom: false,//禁止shift键缩放
        keyboard: false,//禁止键盘事件
        scrollWheelZoom: false,//禁止滚轮缩放
        markerZoomAnimation: false,
        zoomAnimation: false
    });
    map.fitBounds([[33.594328499, 72.072726696], [49.916943932, 97.850140125]]);//调整地图范围
    var mapEvent = {
        //鼠标经过事件
        mouseOver: function (e) {
            if (!e.target.choosed) {
                e.target.bringToFront();//选中位于最上层
                e.target.setStyle({fillColor: "#ff0000"});//改变选中颜色
            }
        },
        //鼠标移出事件
        mouseOut: function (e) {
            if (!e.target.choosed) {
                e.target.bringToBack();
                e.target.setStyle({fillColor: getColorByFid(e.target.fid)});
            }
        },
        //点击事件
        mouseClick: function (e) {
            removeLayer("info");
            //清除选中状态
            map.eachLayer(function (layer) {
                if (layer.type === 1) {
                    layer.choosed = false;
                    layer.setStyle({fillColor: getColorByFid(layer.fid)});//恢复默认颜色
                }
            });
            //设置选中状态
            e.target.choosed = true;
            e.target.bringToFront();//选中位于最上层
            e.target.setStyle({fillColor: "#82E2F9"});//改变选中颜色

            var center = e.target.getCenter();
            //添加闪烁点
            var html_flare = "<div><img src='img/center.png'></div>";
            var flare = L.divIcon({html: html_flare, className: "flare", iconSize: [30, 30], iconAnchor: [15, 15]});
            L.marker(center, {icon: flare, attribution: "info", interactive: false}).addTo(map);
            var coord_pixel = map.latLngToContainerPoint(center);
            var mapDiv = $("#map");
            createLine(coord_pixel.x + mapDiv.offset().left, coord_pixel.y + mapDiv.offset().top);
        },
        style: {
            color: "#FFFFFF",//线颜色
            fill: true,
            fillColor: "#7EBCFF",//填充色
            fillOpacity: 1,//填充透明度
            // smoothFactor: 1.5,//简化点
            weight: 1//线宽
        }
    };
    //地图容器形变事件,更新点击信息提示位置
    map.on("resize", function () {
        map.eachLayer(function (layer) {
            if (layer.type === 1 && layer.choosed) {
                mapEvent.mouseClick({target: layer})
            }
        });
    });
    //请求本地数据，绘制图形
    $.get("data/data.json", function (data, status) {
        if (status === "success") {
            var style = mapEvent.style;
            data.features.forEach(function (feature) {
                var latLngs = getCoordinate(feature.geometry.rings[0]);
                var polygon;
                style.fillColor = getColorByFid(feature.attributes.fid);
                switch (feature.attributes.fid) {
                    case 11://塔城地区，内环
                        var coordinates_t = getCoordinate(feature.geometry.rings[1]);
                        polygon = L.polygon([latLngs, coordinates_t], style).addTo(map);
                        break;
                    case 13:
                    case 14://伊犁哈萨克自治州、克拉玛依市，两个多边形
                        var coordinates_k = getCoordinate(feature.geometry.rings[1]);
                        polygon = L.polygon([[latLngs], [coordinates_k]], style).addTo(map);
                        break;
                    default:
                        polygon = L.polygon(latLngs, style).addTo(map);
                        break;
                }
                polygon.name = feature.attributes.name;
                polygon.fid = feature.attributes.fid;
                polygon.type = 1;
                polygon.on("mouseout", mapEvent.mouseOut);
                polygon.on("mouseover", mapEvent.mouseOver);
                polygon.on("click", mapEvent.mouseClick);
                //默认选择乌鲁木齐市
                if (polygon.fid === 2) {
                    mapEvent.mouseClick({target: polygon});
                }
            });
        }
    });

    /**
     * 将json坐标格式转换
     */
    function getCoordinate(coordinates) {
        var coord = [];
        coordinates.forEach(function (coordinate) {
            coord.push([coordinate[1], coordinate[0]]);
        });
        return coord;
    }

    /**
     * 根据名字移除图层
     * @param name [string] 图层名称
     */
    function removeLayer(name) {
        map.eachLayer(function (layer) {
            if (layer.getAttribution() === name) {
                map.removeLayer(layer);
            }
        });
        //移除文字提示
        $(".polylineSvg").remove();
    }

    /**
     * 根据fid获取颜色,不同市设置不同默认颜色
     * @param fid json中地区编号
     */
    function getColorByFid(fid) {
        if (fid === 9 || fid === 7 || fid === 8 || fid === 0) {
            return "#99C6FF";
        } else {
            return "#7EBCFF";
        }
    }

    //获取图形验证码
    function changeCode() {
        $("#J_vimg").attr("src", "front/sh/login!getPicNode?uid=1001&date=" + new Date().getTime());
    }

    //登陆按钮
    $(".btnBox").click(function () {
        //缩小动画
        var bounds = map.getBounds();
        // $("#map").animate({height:"300px",width:"130px"});

        var mapDiv = $("#map");
        var width_target = 435;//调整后宽度
        var height_target = 388;//调整后高度
        var width = mapDiv.width();
        var height = mapDiv.width();
        var step_width = (width - width_target) / 10;
        var step_height = (height - height_target) / 10;

        var timer = setInterval(function () {
            if (width > width_target && height > height_target) {
                width -= step_width;
                height -= step_height;
                mapDiv.width(width);
                mapDiv.height(height);
                map.fitBounds(bounds);
                map.invalidateSize(false);
            } else {
                clearInterval(timer);
                map.fitBounds(bounds);
            }
        }, 30);

        //隐藏登陆框
        $(".login_r").addClass('none');
        //显示登陆后的菜单等
        $(".login-menu").addClass('active');
        $(".logoArea-user").addClass('active')
    });

    /**
     * 生成折线
     * @param x 行政中心屏幕x坐标
     * @param y 行政中心屏幕y坐标
     */
    function createLine(x, y) {
        var target = $("#target");
        var x_target = target.offset().left + target.width();
        var y_target = target.offset().top + target.height() / 2;
        //line为直角线的实现方式
        // var line = $("<div></div>");
        // line.addClass("polyline");
        // line.width(x - x_target);//x肯定大于x_target

        if (y > y_target) {//起点在文字提示下方
            // line.height(y - y_target);
            // line.css({
            //     "top": y_target,
            //     "left": x_target,
            //     "border-top": "1px solid white",
            //     "border-right": "1px solid white"
            // })
            createSvg(x-x_target,y-y_target,y_target,x_target,false);
        } else if (y === y_target) {
            // line.height(1);
            // line.css({
            //     "top": y_target,
            //     "left": x_target,
            //     "background-color": "white"
            // })
        } else {//起点在文字提示上方

            // line.height(y_target - y);
            // line.css({
            //     "top": y,
            //     "left": x_target,
            //     "border-bottom": "1px solid white",
            //     "border-right": "1px solid white"
            // })
            createSvg(x-x_target,y_target-y,y,x_target,true);
        }
        // $("body").append(line);
    }

    /**
     * 生成svg
     */
    function createSvg(width, height, top,left,isLineBottom) {
        var svg = $("<svg class='polylineSvg' xmlns='http://www.w3.org/2000/svg' version='1.1' width='" +
            width + "px' height='" + height + "px' viewBox='0,0,"+width+","+height+"'></svg>");
        var x,html;//折点svg坐标,折线
        x=width*0.7;
        if (isLineBottom) {//线在底部
            var y=height-1;
            html = "<polyline points='0,"+y+" "+x+","+y+" "+width+",0'" +
                " style='fill:white;stroke:white;stroke-width:1;fill-opacity:0'/>";
            svg.html(html);
        } else {//线在顶部

            html = "<polyline points='0,1 "+x+",1 "+width+","+height+"'" +
                " style='fill:white;stroke:white;stroke-width:1;fill-opacity:0'/>";
            svg.html(html);
        }
        $("body").append(svg);
        svg.css({
            "top":top,
            "left":left
        })
    }

</script>

</html>